/*
 * Z-Index:
 * 0... - base ground
 * 10... - infrastructure
 * 20... - movable
 * 30... - in air (steam etc.)
 * 40... - atmosphere (clouds)
 * 100... - dragging (e.g. new items)
 * 110... - messages
 * 120... - tool bar
 */
@font-face {
	font-family: Emulogic;
	src: url(../assets/emulogic.ttf);
}

html, body {
	background-color: graytext;
	color: black;
	font-family: Emulogic, monospace;
	font-size: 16px;
	-webkit-font-smoothing: none;
	-moz-font-smoothing: none;
	-o-font-smoothing: none;
	-ms-font-smoothing: none;
}

body {
	height: 100%;
	width: 100%;
}

a {
	color: yellow;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.ground {
	width: 2560px;
	height: 1280px;
	border: none;
	border-style: none;
	background-color: transparent;
	position: absolute;
	top: 10px;
	left: 22px;
	z-index: 0;
}

.toolbar {
	width: 0px;
	height: 100%;
	border-left: solid;
	border-right: solid;
	border-width: 6px;
	border-color: olive;
	z-index: 120;
	position: fixed;
}

.toolbar:HOVER {
	width: 100%;
	max-width: 200px;
	border: none;
	border-right: solid;
	border-width: 4px;
	border-color: gray;
	background-color: rgba(110, 110, 110, 0.6);
	z-index: 120;
	overflow: auto;
	overflow-x: hidden;
}

.toolitem {
	position: relative;
	left: auto;
	top: auto;
	float: left;
	opacity: 0.5;
	z-index: 121;
	width: inherit;
	max-width: 64px;
	height: 64px;
	margin: 7px;
	margin-top: 15px;
	color: rgba(0, 0, 0, 0);
}

.toolitem:HOVER {
	opacity: 1;
	background-color: white;
	color: rgba(0, 0, 0, 1);
}

.toolitem.fields {
	background-image: url(../img/fields_collection.png);
}

.toolitem.rails {
	background-image: url(../img/rail_collection.png);
}

.toolitem.signal {
	background-image: url(../img/rail_signal_green.png);
}

.toolitem.switch {
	background-image: url(../img/rail_switch_toggle_request.png);
}

.toolitem.movables {
	background-image: url(../img/movable_collection.png);
}

.field {
	width: 64px;
	height: 64px;
	position: absolute;
	border: none;
	z-index: 1;
}

.field.itemaction {
	opacity: 0.6;
	z-index: 122;
	background: transparent;
}

.field.itemaction.delete {
	opacity: 0.8;
	background: red;
}

.field.itemaction.move {
	opacity: 0.8;
	background: green;
}

.field.itemaction.stop {
	opacity: 0.8;
	background: red;
}

.field.itemaction.switch {
	opacity: 0.8;
	background: yellow;
}

.field.select {
	opacity: 0.3;
	z-index: 100;
	background: white;
	transition: opacity 1s;
}

.field.select:HOVER {
	opacity: 0.7;
}

.field.select.selected {
	opacity: 0.3;
	background: green;
	border: thin solid black;
	transition: background 1s;
}

.field.ground {
	background-image: url("../img/fields_collection.png");
	background-position-y: 0px;
	z-index: 2;
}

.field.ground.grass {
	background-position-y: -64px;
	z-index: 3;
}

.field.rail {
	background-image: url(../img/rail_collection.png);
	background-position-x: 0px;
	background-position-y: 0px;
	z-index: 10;
}

.field.rail.cross {
	background-position-y: 0px;
}

.field.rail.horizontal {
	background-position-y: -64px;
}

.field.rail.vertical {
	background-position-y: -128px;
}

.field.rail.curve_lb {
	background-position-y: -192px;
}

.field.rail.curve_lt {
	background-position-y: -256px;
}

.field.rail.curve_rt {
	background-position-y: -320px;
}

.field.rail.curve_rb {
	background-position-y: -384px;
}

.field.rail.switch_hlb {
	background-position-y: -448px;
}

.field.rail.switch_vlb {
	background-position-y: -512px;
}

.field.rail.switch_hlt {
	background-position-y: -576px;
}

.field.rail.switch_vrt {
	background-position-y: -640px;
}

.field.rail.switch_hrb {
	background-position-y: -704px;
}

.field.rail.switch_hrt {
	background-position-y: -768px;
}

.field.rail.switch_vlt {
	background-position-y: -832px;
}

.field.rail.switch_vrb {
	background-position-y: -896px;
}

.field.signal {
	background-image: url(../img/rail_signal_off.png);
	z-index: 15;
}

.field.signal.red {
	background-image: url(../img/rail_signal_red.png);
}

.field.signal.green {
	background-image: url(../img/rail_signal_green.png);
}

.field.switch {
	background-image: url(../img/rail_switch_toggle_request.png);
	z-index: 16;
}

.field.movable {
	background-image: url(../img/movable_collection.png);
	background-position-x: 0px;
	background-position-y: 0px;
	z-index: 20;
}

.field.movable.train {
	background-position-y: 0px;
}

.field.steam {
	background-image: url(../img/steam.png);
	background-position-x: 0px;
	background-position-y: 0px;
}

.field.steam.s1 {
	background-position-x: -64px;
	z-index: 30;
}

.field.steam.s2 {
	background-position-x: -128px;
	z-index: 31;
}

.field.steam.s3 {
	background-position-x: -192px;
	z-index: 32;
}

.field.steam.s4 {
	background-position-x: -256px;
	z-index: 33;
}

.field.collision {
	z-index: 30;
	transition: background-image 500ms;
}

.field.collision.s1 {
	background-image: url(../img/explosion_1.png);
	z-index: 31;
	transition: background-image 0ms;
}

.field.collision.s2 {
	background-image: url(../img/explosion_2.png);
	z-index: 32;
}

.field.collision.s3 {
	background-image: url(../img/explosion_3.png);
	z-index: 33;
}

.field.collision.s4 {
	background-image: url(../img/explosion_4.png);
	z-index: 34;
}

.field.collision.s5 {
	background-image: url(../img/explosion_5.png);
	z-index: 35;
}

.field.collision.s6 {
	background-image: url(../img/explosion_6.png);
	z-index: 36;
}

.field.collision.s7 {
	background-image: url(../img/explosion_7.png);
	z-index: 37;
}